<template>
  <div class="y-history">
    <h3 class="h3">采购中心</h3>
    <div>
      <a-button
        v-if="isdetail"
        type="reset"
        style="float: right"
        @click="newClaim"
      >
        返回列表</a-button
      >
    </div>
    <div v-if="isshow">
      <div style="position: relative">
        <ul class="tags" style="position: absolute; left: 0; display: flex">
          <li
            v-for="(item, index) in tags"
            @click="changeTag(item, index)"
            :key="index"
            class="changetags"
            :class="{ ischange: ischange == index }"
          >
            {{ item.name }}
          </li>
        </ul>
        <a-form-model
          :model="form"
          :colon="false"
          :labelCol="{ span: 6 }"
          :wrapper-col="{ span: 17 }"
          style="margin: 10px 0; position: relative; right: -1170px"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="关键字" class="from-item__class">
                <a-input v-model="form.searchKey" placeholder />
                <span
                  style="
                    cursor: pointer;
                    position: absolute;
                    height: 100%;
                    font-size: 20px;
                    right: 5px;
                    text-align: center;
                  "
                >
                  <a-icon
                    @click="searchKey"
                    type="search"
                    style="color: #37ddc0"
                  />
                </span>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>

      <div class="tableclass">
        <a-table
          :data-source="data"
          :pagination="false"
          :columns="columns"
          :rowKey="(record) => record.id"
        >
          <span slot="action" slot-scope="text, record">
            <a class="solvebtn" @click="getdetail(record)">详细信息</a>
            <a
              class="solvebtn"
              v-if="ischange == '0'"
              @click="onComplet(record)"
              >已采购</a
            >
          </span>
        </a-table>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination
              :show-total="(total) => `共 ${total} 条记录`"
              v-model="form.currentPage"
              :total="total"
              :defaultPageSize="form.pageSize"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
      <div style="height: 35px">
        <!-- <a-button
          v-if="isshow"
          type="primary"
          style="float: left; margin: 15px 0"
          @click="newClaim"
          >生成采购清单
        </a-button> -->
      </div>
    </div>

    <div v-if="isdetail">
      <h3 style="color: #37ddc0; width: 100%; text-align: center">
        物资申请表
      </h3>
      <a-form-model
        :model="form"
        :labelCol="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        style="margin: 10px 0"
      >
        <a-row type="flex" justify="space-between">
          <a-col :span="8">
            <a-form-model-item label="申请单名称" class="from-item__class">
              {{ details.name }}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请时间" class="from-item__class">
              {{ details.applyTime }}
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="修改时间" class="from-item__class">
              {{ details.updateTime }}
            </a-form-model-item>
          </a-col> -->
        </a-row>
        <a-row type="flex" justify="space-between">
          <!-- <a-col :span="8">
            <a-form-model-item label="编号" class="from-item__class">
              {{ details.serialNumber }}
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="申请人" class="from-item__class">
              {{ details.nickname }}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="大区" class="from-item__class">
              {{ details.areaName }}
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="space-between">
          <a-col :span="8">
            <a-form-model-item label="采购类别" class="from-item__class">
              {{ details.typeName }}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="状态" class="from-item__class">
              {{ details.auditPlan | reviewProgress }}
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="销售合同编号" class="from-item__class">
              {{ details.saleAgreement }}
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
      <h3
        style="color: #37ddc0; width: 100%; text-align: center; margin: 15px 0"
      >
        申请物资采购清单
      </h3>
      <div style="position: relative">
        <a-table
          bordered
          :data-source="detaildata"
          :pagination="false"
          :columns="columnsA"
          :rowKey="(record) => record.id"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "y-history",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      form: {
        currentPage: 1,
        pageSize: 10,
        userId: this.$user.id,
        status: 2,
        searchKey: "",
      },
      ischange: 0,
      tags: [
        {
          key: 2,
          name: "待采购",
        },
        {
          key: 4,
          name: "已采购",
        },
      ],
      isPeople: false,
      isshow: true,
      istable: false,
      isdetail: false,
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          width: "10%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "名称",
          width: "10%",
          ellipsis: "true",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "申请人",
          width: "10%",
          dataIndex: "nickname",
          ellipsis: "true",
          align: "center",
        },
        {
          title: "采购类型",
          dataIndex: "typeName",
          ellipsis: "true",
          scopedSlots: { customRender: "typeName" },
          align: "center",
        },
        {
          title: "地区",
          dataIndex: "areaName",
          ellipsis: "true",
          scopedSlots: { customRender: "areaName" },
          align: "center",
          width: "8%",
        },

        {
          title: "申请时间",
          dataIndex: "applyTime",
          scopedSlots: { customRender: "applyTime" },
          align: "center",
          width: "8%",
        },
        {
          title: "备注",
          dataIndex: "notes",
          scopedSlots: { customRender: "notes" },
          align: "center",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      details: {}, //详细
      current: 1,
      size: 10,
      total: 0,
      userId: "",
      idlist: {
        idList: [],
      },
      detaildata: [],
      dataSource: [
        {
          name: "",
          address: "",
          brand: "",
          num: "",
          unit: "",
          usetime: "",
          Region: "",
          remark: "",
        },
      ],
      columnsA: [
        {
          title: "序号",
          dataIndex: "id",
          width: "5%",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "物资名称",
          dataIndex: "name",
          align: "center",
          ellipsis: "true",
          width: "15%",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "规格型号",
          dataIndex: "version",
          align: "center",
          ellipsis: "true",
          width: "15%",
          scopedSlots: { customRender: "version" },
        },
        {
          title: "品牌",
          dataIndex: "brand",
          align: "center",
          ellipsis: "true",
          width: "15%",
          scopedSlots: { customRender: "brand" },
        },
        {
          title: "数量",
          dataIndex: "number",
          scopedSlots: { customRender: "number" },
          width: "4.3%",
        },
        {
          title: "单位",
          dataIndex: "unit",
          scopedSlots: { customRender: "unit" },
          width: "4.3%",
        },

        {
          title: "备注",
          dataIndex: "notes",
          ellipsis: "true",
          align: "center",
          scopedSlots: { customRender: "notes" },
        },
      ],
    };
  },
  components: {},
  methods: {
    newClaim() {
      this.isshow = !this.isshow;
      this.isdetail = !this.isdetail;
    },
    //搜索按钮
    searchKey() {
      this.getlist(this.form);
    },
    //tab切换
    changeTag(item, i) {
      // console.log(item.key);
      this.ischange = i;
      this.form.status = item.key;
      this.getlist(this.form);
    },
    //详细信息
    getdetail(item) {
      this.isshow = false;
      this.isdetail = true;
      this.$api.lookListDetail(item.id).then((res) => {
        this.details = res.data.data;
        this.details.applyTime = moment(this.details.applyTime).format(
          "YYYY/MM/DD"
        );
        this.detaildata = res.data.data.procuListInfoList;
      });
    },
    //完成采购
    onComplet(item) {
      this.idlist.idList.push(item.id);
      this.$api.purchaseCompleted(this.idlist).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.idlist.idList = [];
        }
      });
      this.getlist(this.form);
    },
    getlist(id) {
      this.$api.findProcurement(id).then((res) => {
        this.form.searchKey = "";
        this.data = res.data.data.records;
        this.total = res.data.data.total;
        this.data.forEach((item) => {
          item.applyTime = moment(item.applyTime).format("YYYY/MM/DD");
        });
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.form.currentPage = page;
      this.getlist(this.form);
    },
  },
  //筛选器
  filters: {
    reviewProgress(value) {
      if (value == 1) {
        return "部门意见";
      }
      if (value == 2) {
        return "主管意见";
      }
      if (value == 3) {
        return "采购意见";
      }
      if (value == 4) {
        return "经理意见";
      }
      if (value == 5) {
        return "已审批";
      }
    },
  },
  mounted() {
    // console.log(this.$user);

    this.getlist(this.form);
  },
};
</script>
<style lang='scss' scoped>
.solvebtn {
  display: inline-block;
  margin: 0 10px;
  color: #9fb043;
}
.ischange {
  color: #37ddc0 !important;
  border-bottom: 1px solid #37ddc0;
}
.changetags {
  color: #6f8a86;
}
.tags {
  height: 100%;
  li {
    line-height: 40px;
    margin: 0 15px;
    cursor: pointer;
  }
}
.bootom_btn {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 50px;
}
.deleteBtn {
  position: absolute;
  color: #37ddc0;
  right: -20px;
  font-size: 20px;
}
::v-deep .input_style {
  background-color: transparent !important;
  outline: none !important;
  border: none !important;
}

.y-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.y-history .from-item__class {
  display: flex;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}

.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.y-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.y-history .ant-table table {
  border-radius: 0;
  border: 1px solid #207064;
}
::v-deep.y-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
  border: none;
}
::v-deep.y-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #2c6a60;
  padding: 10px;
}
::v-deep.y-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.y-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.y-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.y-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.y-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
/* 分页 */
::v-deep.y-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>